<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">关联用户昵称</label>
        <el-input v-model="query.nickName" clearable placeholder="请输入关联用户昵称" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">关联用户手机号</label>
        <el-input v-model="query.phone" clearable placeholder="请输入关联用户手机号" style="width: 185px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
        <label class="el-form-item-label">小区</label>
        <el-select v-model="query.xqId" style="width: 185px;" placeholder="请选择小区" class="filter-item" @keyup.enter.native="crud.toQuery">
          <el-option
            v-for="item in xqOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <rrOperation :crud="crud" />
        <div>
          <el-button type="primary" round @click="openPayTransferConfigDialog">分账配置</el-button>
          <!--分账配置dialog-->
          <el-dialog
            title="分账配置"
            :visible.sync="payTransferConfigVisible"
            width="30%"
            :before-close="closePayTransferConfigDialog"
          >
            <el-form ref="form" :model="payTransferConfigDetail" :rules="rules" size="small" label-width="80px">
              <el-form-item label="用户类型">
                <el-select v-model="payTransferConfigDetail.type" @change="changeType" style="width: 160px" placeholder="请选择用户类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="小区">
                <el-select v-model="payTransferConfigDetail.xqId" :disabled="isXqShow" filterable placeholder="请选择小区">
                  <el-option
                    v-for="item in xqOptions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="订单类型">
                <el-select v-model="payTransferConfigDetail.orderType" :disabled="isOrderTypeShow" style="width: 160px" placeholder="请选择订单类型">
                  <el-option
                    :disabled="isOrderTypeShow"
                    v-for="item in orderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="分账比例">
                <el-input-number v-model="payTransferConfigDetail.proportion" :precision="0" :step="1" :min="0" :max="100"></el-input-number>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="text" @click="closePayTransferConfigDialog">取消</el-button>
              <el-button :loading="loading" type="primary" @click="commitPayTransferConfig">确认</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="关联用户">
            <div>
              <el-input v-model="selectUserName" :disabled="true" style="width: 250px;" />
              <el-button type="primary" @click="isUserDialogShow" plain>选择用户</el-button>
            </div>
          </el-form-item>
          <el-form-item label="用户类型" prop="type">
            <el-select v-model="form.type" @change="changeType" style="width: 160px" placeholder="请选择用户类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="小区">
            <el-select v-model="form.xqId" :disabled="isXqShow" filterable placeholder="请选择">
              <el-option
                v-for="item in xqOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型" prop="orderType">
            <el-select v-model="form.orderType" :disabled="isOrderTypeShow" style="width: 160px" placeholder="请选择订单类型">
              <el-option
                v-for="item in orderOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" prop="content">
            <el-input v-model="form.remark" :rows="3" type="textarea" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="nickName" label="用户昵称" />
        <el-table-column prop="phone" label="用户电话" />
        <el-table-column prop="communityName" label="关联小区" />
        <el-table-column prop="orderType" label="订单类型">
          <template slot-scope="scope">
            <!-- 根据不同的值显示不同的内容 -->
            <span v-if="scope.row.orderType === 1">儿童管理</span>
            <span v-else-if="scope.row.orderType === 2">跑腿服务</span>
            <span v-else-if="scope.row.orderType === 4">家政服务</span>
            <span v-else-if="scope.row.orderType === 5">看护预约</span>
            <span v-else-if="scope.row.orderType === 6">维修服务</span>
            <span v-else-if="scope.row.orderType === 7">团购预约</span>
            <span v-else />
          </template>
        </el-table-column>
        <el-table-column prop="openid" label="收款用户openid" />
        <el-table-column prop="proportion" label="分账比例" />
        <el-table-column prop="type" label="用户类型">
          <template slot-scope="scope">
            <!-- 根据不同的值显示不同的内容 -->
            <span v-if="scope.row.type === 1">接单员</span>
            <span v-else-if="scope.row.type === 2">代理商</span>
            <span v-else-if="scope.row.type === 3">平台</span>
            <span v-else-if="scope.row.type === 4">平台供应商</span>
            <span v-else-if="scope.row.type === 5">供应商</span>
            <span v-else />
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation
              :data="scope.row"
              :permission="permission"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
      <el-dialog
        title="选择用户"
        :visible.sync="userDialogShow"
        width="45%"
        :before-close="handleClose"
      >
        <label class="el-form-item-label">用户昵称</label>
        <el-input v-model="queryNickName" clearable placeholder="请输入用户昵称" style="width: 185px;" class="filter-item" />
        <label class="el-form-item-label">用户手机号</label>
        <el-input v-model="queryPhone" clearable placeholder="请输入用户手机号" style="width: 185px;" class="filter-item" />
        <el-button type="primary" @click="loadUserList" plain>搜索</el-button>
        <el-table
          ref="singleTable"
          v-loading="this.loading"
          highlight-current-row
          :data="this.userList"
          @current-change="handleCurrentChangeUser"
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="nickName"
            label="昵称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phone"
            label="手机号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="openid"
            label="收款用户openid"
            width="300">
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="this.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="this.pageSize"
          :total="this.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleClick">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import crudPayTransferUser from '@/api/system/payTransferUser'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import { appUser } from '@/api/system/user'
import { allList } from '@/api/system/regionManage'
import payTransferUser from '@/api/system/payTransferUser'

const defaultForm = { id: null, userId: null, xqId: null, proportion: null, type: null, orderType: null, createBy: null, createTime: null, updateBy: null, updateTime: null, remark: null, openid: null }
export default {
  name: 'PayTransferUser',
  computed: {
    payTransferUser() {
      return payTransferUser
    }
  },
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '分账用户配置', url: 'api/payTransferUser', idField: 'id', sort: 'id,desc', crudMethod: { ...crudPayTransferUser }})
  },
  created() {
    allList().then(data => {
      if (data && data.data) {
        for (const item of data.data) {
          this.xqOptions.push({ 'value': item.id, 'label': item.communityName })
        }
      }
    })
  },
  data() {
    return {
      permission: {
      },
      rules: {
        userId: [
          { required: true, message: '关联用户不能为空', trigger: 'blur' }
        ],
        proportion: [
          { required: true, message: '分账比例不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '用户类型不能为空', trigger: 'blur' }
        ]
      },
      orderOptions: [
        {
          value: 1,
          label: '儿童管理'
        }, {
          value: 2,
          label: '跑腿服务'
        }, {
          value: 4,
          label: '家政服务'
        }, {
          value: 5,
          label: '看护预约'
        }, {
          value: 6,
          label: '维修服务'
        }, {
          value: 7,
          label: '团购预约'
        }, {
          value: 8,
          label: '食堂订单'
        }
      ],
      options: [{
        value: 1,
        label: '接单员'
      }, {
        value: 2,
        label: '代理商'
      }, {
        value: 3,
        label: '平台'
      }, {
        value: 4,
        label: '平台供应商'
      }, {
        value: 5,
        label: '供应商'
      }],
      userDialogShow: false,
      selectUserName: null,
      selectUserId: null,
      selectOpenid: null,
      userList: [],
      currentPage: 1,
      pageSize: 10,
      total: null,
      loading: false,
      selectUserRow: null,
      queryNickName: '',
      queryPhone: '',
      xqOptions: [],
      payTransferConfigVisible: false,
      payTransferConfigDetail: {
        type: null,
        xqId: null,
        orderType: null,
        proportion: null
      },
      isXqShow: false,
      isOrderTypeShow: false
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.optShow.download = false
      return true
    },
    [CRUD.HOOK.beforeToAdd]() {
      this.selectUserName = null
      this.selectUserId = null
      this.selectOpenid = null
      this.isXqShow = false
      this.isOrderTypeShow = false
      return true
    },
    [CRUD.HOOK.beforeSubmit]() {
      if (this.selectUserId == null || this.selectOpenid == null) {
        this.$message({
          message: '关联用户不能为空',
          type: 'warning'
        })
        return false
      }
      if ((this.form.type != 3 && this.form.type != 4) && this.form.xqId == null) {
        this.$message({
          message: '请选择小区',
          type: 'warning'
        })
        return false
      }
      if (this.form.type == 1 && this.form.orderType == null) {
        this.$message({
          message: '请选择订单类型',
          type: 'warning'
        })
        return false
      }
      this.form.userId = this.selectUserId
      this.form.openid = this.selectOpenid
      return true
    },
    [CRUD.HOOK.beforeToEdit](obj, row) {
      this.selectUserName = null
      this.selectUserId = null
      this.selectOpenid = null
      this.selectUserName = row.nickName
      if (row.type) {
        this.changeType(row.type)
      }
      this.selectUserId = row.userId
      this.selectOpenid = row.openid
      return true
    },
    loadUserList() {
      this.loading = true
      // 获取小程序人员
      appUser(this.currentPage, this.pageSize, this.queryNickName, this.queryPhone).then(data => {
        if (data && data.content) {
          this.userList = data.content
          this.total = data.totalElements
          this.loading = false
        }
      })
    },
    // 打开价格设置dialog
    openPayTransferConfigDialog() {
      this.isOrderTypeShow = false
      this.isXqShow = false
      this.payTransferConfigVisible = true
    },
    closePayTransferConfigDialog() {
      this.payTransferConfigDetail.type = null
      this.payTransferConfigDetail.xqId = null
      this.payTransferConfigDetail.orderType = null
      this.payTransferConfigDetail.proportion = null
      this.payTransferConfigVisible = false
      this.isXqShow = false
      this.isOrderTypeShow = false
    },
    commitPayTransferConfig() {
      this.loading = true
      payTransferUser.updateProportionByType(this.payTransferConfigDetail).then(data => {
        this.closePayTransferConfigDialog()
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    changeType(value) {
      this.isOrderTypeShow = false
      this.isXqShow = false
      if (value === 3 || value === 2 || value === 4 || value === 5) {
        this.form.orderType = null
        this.payTransferConfigDetail.orderType = null
        this.isOrderTypeShow = true
      }
      if (value === 3 || value === 4) {
        this.form.xqId = null
        this.payTransferConfigDetail.xqId = null
        this.isXqShow = true
      }
    },
    // loadXq() {
    //   this.loading = true
    //   allList().then(data => {
    //     if (data && data.data) {
    //       for (const item of data.data) {
    //         this.xqOptions.push({ 'value': item.id.toString(), 'label': item.communityName })
    //       }
    //     }
    //     this.loading = false
    //   })
    // },
    isUserDialogShow() {
      this.userDialogShow = true
      this.currentPage = 1
      this.pageSize = 10
      this.loadUserList()
      // if (this.userList.length !== 0 && this.selectUserId != null) {
      //   for (let i = 0; i < this.userList.length; i++) {
      //     if (this.userList[i].id === this.selectUserId) {
      //       this.$refs.singleTable.setCurrentRow(this.userList[i])
      //       break
      //     }
      //   }
      // }
    },
    handleClose() {
      this.userDialogShow = false
    },
    handleClick() {
      if (this.selectUserRow == null) {
        this.$message({
          message: '请选择用户',
          type: 'warning'
        })
        return false
      }
      this.selectUserName = this.selectUserRow.nickName
      this.selectUserId = this.selectUserRow.id
      this.selectOpenid = this.selectUserRow.openid
      this.userDialogShow = false
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.loadUserList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.loadUserList()
    },
    handleCurrentChangeUser(val) {
      this.selectUserRow = val
    }
  }
}
</script>

<style scoped>

</style>
